<template>
  <div>
    <!-- =================== 顶部4个表格 ================ -->
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="grid-content bg-red">
          <img src="../../assets/one.png" alt="" />
          <p>
            管理员用户 <br />
            {{ adminNum }}名
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-green">
          <img src="../../assets/two.png" alt="" />
          <p>
            平台注册用户 <br />
            {{ user }}名
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-orange">
          <img src="../../assets/three.png" alt="" />
          <p>
            平台文章总数 <br />
            {{ articleTotal }}章
          </p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-blue">
          <img src="../../assets/four.png" alt="" />
          <p>
            广告位 {{ advNum }} 个 <br />
            广告图 {{ advPic }} 张
          </p>
        </div>
      </el-col>
    </el-row>
    <br />
    <!-- =================== 卡片区域 =================== -->
    <el-row :gutter="20">
      <el-col :span="8" :offset="0">
        <el-card>
          <!-- 顶部标题 -->
          <div slot="header" class="card-title">
            <span>最新注册新用户</span>
          </div>
          <!-- 内容 -->
          <div class="contents">
            <el-row
              type="flex"
              class="content"
              v-for="item in userList"
              :key="item.id"
            >
              <el-col :span="8" class="name"
                >&nbsp;&nbsp;{{ item.username }}</el-col
              >
              <el-col :span="2" class="gender">{{
                item.sex === 0 ? "男" : "女"
              }}</el-col>
              <el-col :span="14" class="info">{{ item.address }}</el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8" :offset="0">
        <el-card>
          <!-- 顶部标题 -->
          <div slot="header">
            <span>点赞文章排行</span>
          </div>
          <!-- 内容 -->
          <div class="contents">
            <el-row
              class="content"
              v-for="item in hotArticleList"
              :key="item.id"
            >
              &nbsp;&nbsp;{{ item.title }}
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8" :offset="0">
        <el-card>
          <!-- 顶部标题 -->
          <div slot="header">
            <span>用户性别分析</span>
          </div>
          <!-- 内容 -->
          <div
            class="contents"
            id="main"
            style="width: 400px; height: 280px"
          ></div>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <!-- =================== 各分类文章发布数量 ================ -->
    <el-row>
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div style="background-color: none">
          <span style="font-size: 18px; color: '#5470c6'"
            ><b>各分类文章发布数量</b></span
          >
        </div>
        <div>
          <div id="main1" style="width: 100%; height: 400px"></div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import PieBaseData from "@/utils/PieBaseData";
import BarBaseData from "@/utils/BarBaseData";
import { getUserInfoApi } from "@/api/article";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    // 饼状图
    this.userEcharts = echarts.init(document.getElementById("main"));
    // 绘制 echarts 图
    this.userEcharts.setOption(PieBaseData);

    //  柱状图
    this.echarts = echarts.init(document.getElementById("main1"));
    // 绘制 echarts 图
    this.echarts.setOption(BarBaseData);
  },
  data() {
    return {
      // 顶部表格数据
      adminNum: "",
      user: "",
      articleTotal: "",
      advNum: "",
      advPic: "",
      // 最新注册用户
      userList: [],
      // 点赞文章排行
      hotArticleList: [],
      // 用户性别分析
      userSexData: {},
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfoApi();
      console.log(res);
      // 赋值操作
      (this.adminNum = res.admin_num), (this.user = res.user.total);
      this.articleTotal = res.article_num;
      this.advNum = res.advimg_num;
      this.advPic = res.advpos_num;
      // 最新注册用户
      this.userList = res.new_user;
      // 点赞文章排行
      this.hotArticleList = res.hot_article;
      // 用户性别分析
      const pieData = [
        { value: res.user.user_woman, name: "女性" },
        { value: res.user.user_man, name: "男性" },
      ];
      // this.upadteUserPie(pieData)
    },
    // upadteUserPie(list){
    //   this.userEcharts.setOption({
    //     series: [{ data: list.map((item)=>{

    //     }) }]
    //   })
    // }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-orange {
  background: #e6a23c;
}
.bg-red {
  background: #fb6d49;
}
.bg-green {
  background: #67c23a;
}
.bg-blue {
  background: #3a7ce7;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 90px;
  display: flex;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.grid-content {
  color: #fff;
  img {
    height: 40px;
    margin-left: 30px;
    margin-right: 20px;
    margin-top: 20px;
  }
}
// 卡片标题背景色
::v-deep .el-card__header {
  background-color: #ddd;
  font-size: 18px;
}

::v-deep .el-card__body {
  padding: 0;
}

.contents .content {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px dashed #eee;
}
</style>
